<template>
  <aside>
    <nav class="sidebar-nav">
      <vue-scroll>
        <ul class="metismenu" ref="menu">
          <li v-for="(m, index) in menu.filter(item => item[field.pid] == topLevel)" :key="index">
            <a :class="{ 'has-arrow': menu.filter(item => item[field.pid] == m[field.id]).length !== 0 }" @click="routerLink($event, m[field.url])">{{m[field.name]}}</a>
            <submenu :menu="menu" :topLevel="m[field.id]" :field="field" v-if="menu.filter(item => item[field.pid] == m[field.id]).length !== 0" />
          </li>
        </ul>
      </vue-scroll>
    </nav>
  </aside>
</template>
<script>
import metismenu from 'metismenu'
import submenu from './submenu'
export default {
  components: {
    submenu
  },
  props: {
    menu: {
      required: true,
      type: Array
    },
    topLevel: {
      required: true,
      type: Number
    },
    field: {
      required: true,
      type: Object,
      default () {
        return {
          pid: 'pid',
          id: 'id',
          name: 'name',
          url: 'url'
        }
      },
      validator(value) {
        if (!value.pid || !value.id || !value.name || !value.url) {
          return false
        } else {
          return true
        }
      }
    }
  },
  methods: {
    routerLink(e, url) {
      if (e.target.className === 'has-arrow') return
      this.$router.push(url)
    }
  },
  watch: {
    menu() {
      this.$nextTick(() => {
        new metismenu(this.$refs.menu)
      })
    }
  }
}
</script>
<style lang="less">
@import '~metismenu/dist/metisMenu.css';

.sidebar-nav {
  background: #253D4E;
  height: 100%;
}

.sidebar-nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
  background: #35495e;
}

.sidebar-nav .metismenu {
  background: #253D4E;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.sidebar-nav .metismenu>li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
}

.sidebar-nav .metismenu a {
  position: relative;
  display: block;
  padding: 13px 15px;
  color: #DCE0E2;
  outline-width: 0;
  transition: all .3s ease-out;
  font-size: 13px;
  cursor: pointer;
}

.sidebar-nav .metismenu ul a {
  padding: 10px 15px 10px 30px;
}

.sidebar-nav .metismenu ul ul a {
  padding: 10px 15px 10px 45px;
}

.sidebar-nav .metismenu a:hover,
.sidebar-nav .metismenu a:focus,
.sidebar-nav .metismenu a:active {
  color: #f8f9fa;
  text-decoration: none;
  background: #5B85AA;
}
</style>